import React, {Component} from 'react'
import {Relax} from 'iflux2';
import {Row, Col, Button, Modal, message} from 'antd';
import {List} from 'immutable';

import AddedGoods from './added-goods';
import noop from 'util/noop';

import {maxSelectedGoodsNumQL} from '../ql';

@Relax
export default class Toolbar extends Component {

    static defaultProps = {
        maxNum: maxSelectedGoodsNumQL,
        mergeAddedToSort: noop,
        resetRowKeys: noop,
        queryGoodsAdded: noop,
        resetPagination: noop

    }


    constructor(props) {
        super(props);

        this.state = {
            visible: false,
            addedGoods: List()
        }
    }


    render() {
        return (
            <div>
                <Row className="table-toolbar">
                    <Col span={24}>
                        <Button type="ghost" onClick={()=>this.addSort()}>新增排序商品</Button>
                        <span style={{ marginLeft: 8 }}>按下鼠标左键并拖动商品，可对商品/单品的位置进行排序，上限50</span>
                    </Col>
                </Row>
                <Modal title="新增排序商品"
                       width={800}
                       visible={this.state.visible}
                       onOk={()=>this.onOk()}
                       onCancel={()=>this.onCancel()}>
                    <AddedGoods/>
                </Modal>
            </div>
        )
    }


    /**
     * 点击新增商品按钮
     */
    addSort() {
        const {resetPagination, queryGoodsAdded, maxNum} = this.props;
        if (!maxNum) {
            message.warn('最多只能添加50个商品，请先删除商品');
            return;
        }
        resetPagination();
        queryGoodsAdded().then(()=>{
            this.setState({
                visible: true
            });
        });
    }


    /**
     * 新增商品确认按钮操作
     */
    onOk() {
        this.props.mergeAddedToSort();
        this.processingSite();
    }


    /**
     * 新增商品取消按钮操作
     */
    onCancel() {
       this.processingSite();
    }


    processingSite() {
        this.setState({
            visible: false
        });
        this.props.resetRowKeys();
    }


}